<template>
<div class="orderSuccess-container">
  <van-image class="success-img" :src="success"></van-image>
  <text class="success-text">提交成功</text>
  <text class="tip-text">我们将在48小时内发货</text>
  <div class="complete-btn" @click="complete">完成</div>
</div>
</template>

<script>
import success from '../assets/images/success.png'
import {reactive,toRefs} from 'vue'
import router from '../router'
import { Toast } from 'vant';
export default {
  name: 'orderSuccess',
  setup(props) {
    //参数
    let orderSuccess = reactive({
      success
    })
    function complete() {
      // if(localStorage.getItem('token')){
      //   router.push('/home')
      // }else{
      //   Toast('请登录后操作！')
      //   router.push('/login')
      // }
      router.push('/home')
    }
    //挂载
    return{ ...toRefs(orderSuccess),complete}
  }
}
</script>

<style scoped>
page{
  width:100%;
  height:100%;
}
.orderSuccess-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width:100%;
  height:100%;
  padding-top: 100px;
  box-sizing: border-box;
  background-color: #eeeeee;
}

.success-img{
  display: block;
  width:250px;
  height: 250px;
  object-fit: contain;
}

.success-text{
  margin-top: 20px;
  font-size: 34px;
}

.tip-text{
  margin-top: 10px;
  font-size: 26px;
  color:#9c9c9c;
}

.complete-btn{
  width:90%;
  height: 90px;
  margin-top: 40px;
  line-height: 90px;
  border-radius: 10px;
  text-align: center;
  color:#ffffff;
  background-color: #31b573;
  box-shadow: inset 0 -4px 5px 3px rgba(138, 202, 157,.8);  
}
</style>